<template>
  <div id="user">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="角色名称">
        <el-input v-model="form.name" placeholder="角色名称查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addinfo" icon="el-icon-plus">添加人员</el-button>
        <el-dialog title="添加  管理员" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="账户名称" :label-width="formLabelWidth" prop="username" style="margin-bottom:20px;">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账户昵称" :label-width="formLabelWidth" prop="nickname" style="margin-bottom:20px;">
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone" style="margin-bottom:20px;">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账户密码" :label-width="formLabelWidth" prop="password" style="margin-bottom:20px;">
              <el-input type='password' v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add(dialogFormVisible = false)">确 定</el-button>
          </div>
        </el-dialog>
        <span class="right">
          <el-button type="primary" icon="el-icon-search">查询</el-button>
          <el-button type="primary" icon="icon-zhongzhi">重置</el-button>
        </span>
      </el-form-item>
    </el-form>
    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
      <el-table-column prop="_id" label="id" width="180"></el-table-column>
      <el-table-column prop="username" label="用户名" width="180"></el-table-column>
      <el-table-column prop="nickname" label="用户昵称"></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
      <el-table-column prop="position" label="部门" width="180"></el-table-column>
      <el-table-column prop="root" label="岗位"></el-table-column>
      <el-table-column prop="time" label="创建时间" width="180"></el-table-column>
      <el-table-column label="Action">
        <el-button type="text" @click="dialogFormVisible1='true'">设置组织</el-button>

        <el-dialog title="编辑  管理员组织" :visible.sync="dialogFormVisible1">
          <el-form :model="form">
            <el-form-item label="账户名称" :label-width="formLabelWidth">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="组织部门" :label-width="formLabelWidth" style="margin-bottom:20px;">
              <el-select v-model="form.position" placeholder="请选择组织部门">
                <el-option label="开发部" value="shanghai"></el-option>
                <el-option label="运营部" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="组织职位" :label-width="formLabelWidth" style="margin-bottom:20px;">
              <el-radio-group v-model="form.root">
                <el-radio label="普通"></el-radio>
                <el-radio label="组长"></el-radio>
                <el-radio label="经理"></el-radio>
              </el-radio-group>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
          </div>
        </el-dialog>

        <el-button type="text" @click="dialogFormVisible2 = true">设置角色</el-button>
        <el-dialog :visible.sync="dialogFormVisible2" title="设置角色">
          <div>
            <el-transfer :data="data"></el-transfer>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
          </div>
        </el-dialog>

        <el-button type="text" @click="dialogFormVisible3 = true">重置密码</el-button>
        <el-dialog title="重置  管理员密码" :visible.sync="dialogFormVisible3">
          <el-form :model="form">
            <el-form-item label="新密码" :label-width="formLabelWidth">
              <el-input v-model="form.password" autocomplete="off" type='password'></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible3= false">确 定</el-button>
          </div>
        </el-dialog>

        <el-button type='text' @click="del" style="color:red;">删除</el-button>
        <!-- <el-button type="text" style="color:red;">删除</el-button> -->
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[4,8]"
      :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total='tableData.length'>
    </el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'user',

  data () {
    const generateData = _ => {
      const data = []
      const cities = ['系统管理员', '商户', '省代', '市代']
      const pinyin = ['xitonguanliyuan', 'shanghu', 'shengdai', 'shidai']
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        })
      })
      console.log(_);
      return data
    }
    return {
      data: generateData(),
      value: [],
      filterMethod (query, item) {
        return item.pinyin.indexOf(query) > -1
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      formLabelWidth: '120px',
      pagesize: 4,
      total: 0,
      form: {
        username: '',
        nickname: '',
        phone: 0,
        password: '',
        position: '',
        root: ''

      },
      currentPage: 1, // 默认开始页面
      tableData: [{
        department: '',
        nickname: '',
        password: '',
        phone: 0,
        position: '',
        root: '',
        time: '',
        userImg: '',
        username: '',
        _id: ''
      }]

    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    addinfo () {
      this.dialogFormVisible = true
    },
    getInfo () {
      var that = this
      axios
        .get('http://47.108.201.43:3000/api/GetAllRoleData')
        .then(function (res) {
          console.log(res)
          that.tableData = res.data.success
        })
    },
    handleSizeChange (size) {
      console.log(`每页 ${size} 条`)
      this.pagesize = size
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      console.log(`当前页: ${currentPage}`)
    },

    add () {
      const that = this
      axios.post('http://47.108.201.43:3000/api/GetAllRoleData', {
        username: this.form.username,
        nickname: this.form.nickname,
        phone: this.form.phone,
        password: this.form.password
      }).then(function (res) {
        that.getInfo()
        console.log(res)
        if (res.data.status) {
          that.$message({
            type: 'success',
            message: '添加成功！'
          })
          that.dialogFormVisible = false
        }
      })
    },
    del () {
      this.$message('哈哈哈  孩子！不要删啦！！！')
    }

  }
}
</script>
<style scoped>
  .el-input {
    width: 200px;
  }

  span.right {
    margin-left: 800px;
  }
</style>
